<template>
  <div class="pictureDetail">
    <div class="textContent clearfix">
      <button class="right" @click="hiddenText()" id="textContent">隐藏文本框</button>
      <quillEditor min-height="200px" ref="editor"></quillEditor>
    </div>
    <div class="picList">
      <el-table
          border stripe
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="chapterName"
            label="章节名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="wordsNum"
            label="句子编号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="role"
            label="角色">
        </el-table-column>
        <el-table-column
            prop="cv"
            label="cv">
        </el-table-column>
        <el-table-column
            prop="content"
            label="文本">
          <template slot-scope="scope">
            <div style="position: relative">
              <div class="hiddenOverText" :title="scope.row.content">{{scope.row.content}}</div>
              <span v-if="JSON.stringify(scope.row.content).length > 36" class="overText">...</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
export default {
  name:'index',
  components:{quillEditor},
  data(){
    return{
      tableData: [
        {
          chapterName:'xiadsad',
          wordsNum:10,
          role:'dsd',
          cv:'sd',
          content:
              '第805集 嚣张李霄的询问，让得在座十几个人的目光都是一旋，望向那名端坐在自己位置上，挺直腰杆，一言不发的男子，和另一名看上去狂妄无比，当着众人的面，抽雪茄，吞云吐雾，神情嚣张，四十左右的中年胖子。刚进门时，李霄就注意到过他们，所有人都对他从骨子里的恭敬和敬仰，只有这两个人显得极为嚣张。三十左右的男子面无表情，看都没看过他一眼，而那个全身上下满是滚刀肉，脑袋像个球，身高一米六的男人更是满眼的轻蔑，自始至终都在抽烟。原本李霄暂时不想理会他们，可见众人都将目光望向他们，显然他们就是资料上记载的陈辉和蓝胖子了。似乎感受到周围望过来的目光，陈辉依旧毫无动静，蓝胖子嘴角一抽，将脑袋看向李霄，对着他的方向吐了口烟雾：\n' +
              '第805集 嚣张\t第805集 嚣张李霄的询问，让得在座十几个人的目光都是一旋，望向那名端坐在自己位置上，挺直腰杆，一言不发的男子，和另一名看上去狂妄无比，当着众人的面，抽雪茄，吞云吐雾，神情嚣张，四十左右的中年胖子。刚进门时，李霄就注意到过他们，所有人都对他从骨子里的恭敬和敬仰，只有这两个人显得极为嚣张。三十左右的男子面无表情，看都没看过他一眼，而那个全身上下满是滚刀肉，脑袋像个球，身高一米六的男人更是满眼的轻蔑，自始至终都在抽烟。原本李霄暂时不想理会他们，可见众人都将目光望向他们，显然他们就是资料上记载的陈辉和蓝胖子了。似乎感受到周围望过来的目光，陈辉依旧毫无动静，蓝胖子嘴角一抽，将脑袋看向李霄，对着他的方向吐了口烟雾：'
        },
        {
          chapterName:'xiadsad',
          wordsNum:10,
          role:'dsd',
          cv:'sd',
          content:'sda'
        }
      ],
    }
  },
  methods:{
    hiddenText(){
      let textContent = document.getElementById('textContent')
      console.log(textContent);
      if(textContent.innerText === '显示文本框'){
        textContent.innerText = '隐藏文本框'
        textContent.style.cssText = 'color: #fff;background-color: #409eff;border-color: #409eff;'
        this.$refs.editor.$el.style.cssText='display:block;'
      }
      else if(textContent.innerText === '隐藏文本框'){
        textContent.innerText = '显示文本框'
        textContent.style.cssText = 'color: #fff;background-color: #f56c6c;border-color: #f56c6c;'
        this.$refs.editor.$el.style.cssText='display:none;'
      }
    }
  }
};
</script>

<style scoped lang='scss'>
.pictureDetail {
  .textContent {
    button{
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      -webkit-appearance: none;
      text-align: center;
      box-sizing: border-box;
      outline: none;
      margin: 0;
      transition: .1s;
      font-weight: 500;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      padding: 12px 20px;
      font-size: 14px;
      border-radius: 4px;
    }
    .quill-editor{
      height: 400px;
      display: none;
      margin-top: 30px;
    }
  }

  .picList {
    margin-top: 70px;
    /deep/ .el-table__header .is-leaf{
      color: black;
      font-weight: bold;
      background-color: #e3e4e5;
    }
    .hiddenOverText {
      max-height: 70px;
      overflow: hidden;
      text-overflow: ellipsis;
      position: relative;
      line-height: 23px;
    }
    .overText {
      position: absolute;
      bottom: 0px;
      content: '...';
      right: -8px;
    }
    .noText {
      width: 100% !important;
    }

  }
}
</style>

